<template>
    <div class="wrapper">

        <!-- header部分 -->
        <header>
            <p>地址管理</p>
        </header>
        <!-- 地址列表部分 -->
        <ul class="addresslist">
            <li v-for="item in deliveryAddressArr">
                <div class="addresslist-left" @click="setDeliveryAddress(item)">
                    <h3>{{item.name}} {{item.phone}}</h3>
                    <p>{{item.address}}</p>
                </div>
                <div class="addresslist-right">
                    <i class="fa fa-edit" @click="editUserAddress(item.id)"></i>
                    <i class="fa fa-remove" @click="removeUserAddress(item.id)"></i>
                </div>
            </li>
        </ul>

        <!-- 新增地址部分 -->
        <div class="addbtn" @click="toAddUserAddress">
            <i class="fa fa-plus-circle"></i>
            <p>新增收货地址</p>
        </div>

        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>

<script>
    import Footer from '../components/Footer.vue';

    export default {
        name: 'UserAddress',
        data() {
            return {
                businessId: this.$route.query.businessId,
                user: {},
                deliveryAddressArr: []
            }
        },
        created() {
            this.user = JSON.parse(this.$getSessionStorage('user'))

            this.listDeliveryAddressByUserId();
        },
        components: {
            Footer
        },
        methods: {
            async listDeliveryAddressByUserId() {
                let url = "/user_address/" + this.user.id
                const res = await this.$ajax_(url, null, 'get')
                this.deliveryAddressArr = res.data.list
            },
            setDeliveryAddress(deliveryAddress) {
                //把用户选择的默认送货地址存储到localStorage中

                this.$setLocalStorage(this.user.id, deliveryAddress);
                this.$router.go(-1)
                // this.$router.push({path: '/orders', query: {businessId: this.businessId}});
            },
            toAddUserAddress() {
                this.$router.push({path: '/addUserAddress', query: {businessId: this.businessId}});
            },
            editUserAddress(daId) {
                this.$router.push({path: '/editUserAddress', query: {businessId: this.businessId, daId: daId}});
            },
            removeUserAddress(daId) {
                this.$confirm('确认要删除此送货地址吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(async () => {
                    let url = "/user_address/" + daId
                    const res = await this.$ajax_(url, null, 'delete')
                    this.$alert_res(res)
                    this.listDeliveryAddressByUserId()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                // if (!confirm('确认要删除此送货地址吗？')) {
                //     return;
                // }

            }
        }
    }
</script>

<style scoped>
    /*************** 总容器 ***************/
    .wrapper {
        width: 100%;
        height: 100%;
        background-color: #F5F5F5;
    }

    /*************** header ***************/
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #fff;
        font-size: 4.8vw;
        position: fixed;
        left: 0;
        top: 0;
        /*保证在最上层*/
        z-index: 1000;
    }

    /*************** addresslist ***************/
    .wrapper .addresslist {
        width: 100%;
        margin-top: 12vw;
        background-color: #fff;
    }

    .wrapper .addresslist li {
        width: 100%;
        box-sizing: border-box;
        border-bottom: solid 1px #DDD;
        padding: 3vw;

        display: flex;
    }

    .wrapper .addresslist li .addresslist-left {
        flex: 5;
        /*左边这块区域是可以点击的*/
        user-select: none;
        cursor: pointer;
    }

    .wrapper .addresslist li .addresslist-left h3 {
        font-size: 4.6vw;
        font-weight: 300;
        color: #666;
    }

    .wrapper .addresslist li .addresslist-left p {
        font-size: 4vw;
        color: #666;
    }

    .wrapper .addresslist li .addresslist-right {
        flex: 1;
        font-size: 5.6vw;
        color: #999;
        cursor: pointer;

        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    /*************** 新增地址部分 ***************/
    .wrapper .addbtn {
        width: 100%;
        height: 14vw;
        border-top: solid 1px #DDD;
        border-bottom: solid 1px #DDD;
        background-color: #fff;
        margin-top: 4vw;

        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 4.5vw;
        color: #0097FF;
        user-select: none;
        cursor: pointer;
    }

    .wrapper .addbtn p {
        margin-left: 2vw;
    }
</style>
